<template>
  <div class="video-container h-screen flex justify-center items-center">
    <h1 class="absolute top-10">
      使用localhost或者file://或者https访问当前页面
    </h1>
    <div class="w-2/5 h-3/5 relative lg:border-red-500 <xl:w-7/10" sm="w-4/5">
      <video
        ref="video"
        id="video"
        class="text-shadow-md bg-gray-500 rounded-md w-full h-full"
      ></video>
      <div
        class="absolute left-1/2 bottom-10 transform -translate-x-1/2 w-15 h-15"
        @click="playPicture"
      >
        <img src="@/assets/photograph.png" class="w-full h-full" alt="" />
      </div>

      <div
        class="w-15 h-15 bg-dark-100/500 absolute left-10 bottom-10 rounded-md shadow-md"
      >
        <canvas ref="canvas" class="w-full h-full"></canvas>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'Video',
  setup() {
    type NavigatorExtends = Navigator & {
      menavigatordiaDevices?: any;
      webkitGetUserMedia?: any;
      mozGetUserMedia?: any;
      getUserMedia?: any;
    };

    const video = ref();
    const canvas = ref<HTMLCanvasElement>();
    const ctx = computed(() => canvas.value!.getContext('2d')!);
    onMounted(() => {
      getCompetence();
    });

    function getCompetence() {
      if (navigator.mediaDevices === undefined) {
        (navigator as NavigatorExtends).menavigatordiaDevices = {};
      }

      if (navigator.mediaDevices?.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          let getUserMedia =
            (navigator as NavigatorExtends).webkitGetUserMedia ||
            (navigator as NavigatorExtends).mozGetUserMedia ||
            (navigator as NavigatorExtends).getUserMedia;

          if (!getUserMedia) {
            return Promise.reject(
              new Error(`getUserMedia is not implemented in this browser`)
            );
          }
          return new Promise((resolve, reject) => {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }
      const constraints = {
        audio: false,
        video: {
          transform: 'scaleX(-1)',
        },
      } as MediaStreamConstraints;

      navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        console.log('stream', stream);
        console.log('srcObject :>> ', 'srcObject' in video.value!);
        if ('srcObject' in video.value!) {
          video.value.srcObject = stream;
        } else {
          video.value.src = window.URL.createObjectURL(stream as any);
        }
      });
      video.value.onloadedmetadata = function () {
        video.value.play();
      };
      return navigator;
    }

    function playPicture() {
      ctx.value.drawImage(
        video.value,
        0,
        0,
        video.value.width,
        video.value.height
      );
    }

    return {
      video,
      canvas,
      getCompetence,
      playPicture,
    };
  },
});
</script>

<style scoped></style>
